<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>附近门店</title>
    <meta name="viewport" content="user-scalable=no">
    <meta name="format-detection" content="telephone=no">
	<meta http-equiv="x-rim-auto-match" content="none"> 
  	<meta http-equiv="pragma" content="no-cache">
  	<meta http-equiv="cache-control" content="no-cache">
  	<meta http-equiv="expires" content="0">
  	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  	<meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="static/weixin/css/common.css">
    <link rel="stylesheet" type="text/css" href="static/weixin/font/css/font-awesome.css">
	<link rel="stylesheet" href="static/weixin/plug/weui/css/weui.css">
	<script type="text/javascript" src="static/weixin/js/myJs.js"></script>
  </head>

  <body>
    <div style="margin:5vw">
		<ul class="local_ul" id="list">
			<!-- <li>
				<div>
					<p class="local_md_name">胜利路总店</p>
					<p class=" local_detailed_name">胜利路总店胜利路总店胜利路总店胜利路总店胜利路总店</p>
					<a href='tel:10086' class="local_tel"><i class="fa fa-phone-square"></i>10086</a>
				</div>
				<div>
					<span class="local_distance local_phone" >xxxkm</span>
					<a href='tel:10086' class='local_relationship'><i class="fa fa-map-marker"></i></a>
				</div>
			</li> -->
			
		</ul>
	</div>
	<div class="weui-loadmore">
		<i class="weui-loading"></i> <span class="weui-loadmore__tips">正在加载</span>
	</div>
</body>
<script type="text/javascript" src="static/weixin/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
$(function(){
	//1.获取接口所需要的数据
	$.ajax({
		type: "POST",
		url: '<%=basePath%>weixin/vip/wxConfig?tm='+new Date().getTime(),
    	data: {url:location.href.split('#')[0]},
		dataType:'json',
		cache: false,
		success: function(data){
			console.log('签名数据:'+data);
			//2.验证接口
			wx.config({
			    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			    appId: data.appid, // 必填，公众号的唯一标识
			    timestamp: data.timestamp, // 必填，生成签名的时间戳
			    nonceStr: data.nonceStr, // 必填，生成签名的随机串
			    signature: data.signature,// 必填，签名，见附录1
			    jsApiList: ['getLocation','openLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			});
			// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
			wx.ready(function(){
				wx.checkJsApi({//接口验证
	                jsApiList: [
	                    'getLocation',
	                    'openLocation'
	                ],
	                success: function (res) {
	                	//3.获取当前位置
		                wx.getLocation({
						type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
						success: function (res) {
							var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
							var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
							var speed = res.speed; // 速度，以米/每秒计
							var accuracy = res.accuracy; // 位置精度
							var url="http://apis.map.qq.com/ws/coord/v1/translate?locations="+latitude+","+longitude+"&type=1&key=SF3BZ-RRWCO-356WF-SMLRH-Q6GBE-WWFI7&output=jsonp";
						   	console.log(url);
						   	//4.把当前位置坐标转换为腾讯地图坐标
						   $.ajax({//gps坐标转换为腾讯坐标。百度地图坐标同样也要转换
						     url:url,
						     dataType:'jsonp',
						     type:'get',
						     success:function(data){
						       console.log(data);
						       console.log(data.locations[0].lat);
						       console.log(data.locations[0].lng);
						       //5.加载附近门店
						       $.ajax({
									type: "POST",
									url: '<%=basePath%>weixin/vip/getLocal?tm='+new Date().getTime(),
							    	data: {lat:data.locations[0].lat, lng:data.locations[0].lng},
									dataType:'json',
									cache: false,
									success: function(rs){
										if (rs.data.success) {
											var lists = rs.data.data;
											if (null == lists || lists.length == 0) {
												$("#list").append("<li> <span class='interal_detail'>还没有记录噢</span></li>");
												$(".weui-loadmore").hide();
												return;
											} else {
												for (var n = 0; n < lists.length; n++) {
													var distance = parseFloat(lists[n].distance).toFixed(1);
													
													$("#list").append("<li>"
														+"<div>"
														+	"<p class='local_md_name'>" + lists[n].name + "</p>"
														+	"<p class='local_detailed_name'>" + lists[n].diz + "</p>"
														+	"<a href='tel:" + lists[n].dianh + "' class='local_tel'><i class='fa fa-phone-square'></i>" + lists[n].dianh + "</a>"
														+"</div>"
														+"<div>"
														+ 	"<span class='local_distance local_phone' >" + distance + "km</span>"
														+ 	"<a href=\"javascript:looklocal("+lists[n].lat+","+lists[n].lng+",'"+lists[n].name+"','"+lists[n].diz+"');\" class='local_relationship'><i class='fa fa-map-marker'></i></a>"
														+"</div>"
														+"</li>");
												}
												$(".weui-loadmore").hide();
											}
										} else {
                                            $.toast(rs.data.msg, "text");
                                            $(".weui-loadmore").hide();
										}
									},
									error:function() {
							     	}
						    	 });
						     },
						     error:function(XMLHttpRequest, textStatus, errorThrown) {
						       console.log(XMLHttpRequest.status);
						       console.log(XMLHttpRequest.readyState);
						       console.log(textStatus);
						     }});

						}
					});
	                }
           		 });
			});
			wx.error(function(res){
	   			// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			});
			console.log(data.msg);
		}
	});
});
function looklocal(lat, lng, name, diz){
	wx.openLocation({
		latitude: lat, // 纬度，浮点数，范围为90 ~ -90
		longitude: lng, // 经度，浮点数，范围为180 ~ -180。
		name: name, // 位置名
		address: diz, // 地址详情说明
		scale: 13, // 地图缩放级别,整形值,范围从1~28。默认为最大
		infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
	});
}
</script>
</html>
